<template>
  <div class="npi-clear-control">
    <!-- 用户数据清零 -->
    <div class="npi-clear-control__item">
      <div class="npi-clear-control__info">
        <span class="info-label">用户数据清零</span>
        <span class="info-desc">清除用户配置和设置数据</span>
      </div>
      <div class="npi-clear-control__action">
        <el-button
          type="danger"
          size="small"
          :loading="isClearingUser"
          :disabled="isClearing"
          @click="handleClearUserData"
        >
          用户数据清零
        </el-button>
      </div>
    </div>

    <!-- NPI 数据清零 -->
    <div class="npi-clear-control__item">
      <div class="npi-clear-control__info">
        <span class="info-label">NPI 数据清零</span>
        <span class="info-desc">清除 NPI 相关数据和记录</span>
      </div>
      <div class="npi-clear-control__action">
        <el-button
          type="danger"
          size="small"
          :loading="isClearingNpi"
          :disabled="isClearing"
          @click="handleClearNpiData"
        >
          NPI 数据清零
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNpiClear } from "@/composables/useNpiClear";

// Props
interface Props {
  /** CPU 编号 */
  cpu?: number;
}

const props = withDefaults(defineProps<Props>(), {
  cpu: 1,
});

// Emits
interface Emits {
  (e: "clear-user", cpu: number, success: boolean): void;
  (e: "clear-npi", cpu: number, success: boolean): void;
}

const emit = defineEmits<Emits>();

// 使用 NPI 数据清零 Composable
const {
  isClearing,
  isClearingUser,
  isClearingNpi,
  clearUserData,
  clearNpiData,
} = useNpiClear();

// 事件处理函数
const handleClearUserData = async () => {
  try {
    const success = await clearUserData(props.cpu);
    emit("clear-user", props.cpu, success);
  } catch (error) {
    console.error("用户数据清零失败:", error);
    emit("clear-user", props.cpu, false);
  }
};

const handleClearNpiData = async () => {
  try {
    const success = await clearNpiData(props.cpu);
    emit("clear-npi", props.cpu, success);
  } catch (error) {
    console.error("NPI 数据清零失败:", error);
    emit("clear-npi", props.cpu, false);
  }
};
</script>

<style scoped lang="scss">
.npi-clear-control {
  &__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--el-bg-color-page);
    border-radius: 6px;
    border: 1px solid var(--el-border-color-light);
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--el-border-color);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__info {
    display: flex;
    flex-direction: column;
    flex: 1;

    .info-label {
      font-weight: 600;
      color: var(--el-text-color-primary);
      font-size: 14px;
      margin-bottom: 4px;
    }

    .info-desc {
      color: var(--el-text-color-regular);
      font-size: 12px;
      line-height: 1.4;
    }
  }

  &__action {
    display: flex;
    align-items: center;
    margin-left: 16px;
  }
}

// 危险操作按钮样式增强
.el-button--danger {
  &:hover {
    background-color: var(--el-color-danger-light-3);
    border-color: var(--el-color-danger-light-3);
  }

  &.is-loading {
    background-color: var(--el-color-danger-light-5);
    border-color: var(--el-color-danger-light-5);
  }

  &.is-disabled {
    background-color: var(--el-color-danger-light-8);
    border-color: var(--el-color-danger-light-8);
    color: var(--el-text-color-placeholder);
  }
}
</style>
